<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Proxy Test</title>
  <link rel="stylesheet" href="./css/mgrid.css">
  <link rel="stylesheet" href="./css/concise.min.css">
  <link rel="stylesheet" href="./css/concise-ui.min.css">
</head>
<body>
  <div container row style="margin-top: 1rem;">

    <div sm-6 md-4 lg-3>
      <div data-name=xyz></div>
    </div>

    <div sm-6 md-4 lg-3>
      <div data-name=xyz></div>
    </div>

    <div sm-6 md-4 lg-3>
      <div data-name=xyz></div>
    </div>

    <div sm-12 md-12 lg-12>
      <div data-name=info></div>
    </div>

  </div>

  <script>

    let data = {}

    let pxy = new Proxy(data, {
      //obj->data, k是访问的key值
      get: (obj, k) => {
        return obj[k] || null
      },

      set: (obj, k, dat) => {
        obj[k] = dat
        let nds = document.querySelectorAll(`[data-name=${k}]`)
        for (let n of nds) {
          n.innerHTML = dat
        }
      },

      deleteProperty: (obj, k) => {
        delete obj[k];

        let nds = document.querySelectorAll(`[data-name=${k}]`)
        for (let n of nds) {
          n.innerHTML = ''
        }
      }
    })
    
    pxy.xyz = 1234;
    console.log("data:",data);

    setTimeout(() => {
      delete pxy.xyz;
      console.log("data:",data);
    }, 3000)

  </script>
</body>
</html>
